<!--事件和告警  -->
<template>
  <div class="">
    <el-tabs type="border-card">
      <el-tab-pane label="当前告警">
        <yg-table
          :columns="columns"
          :tableList="TableList2"
          :height="'650'"
          :loading="loadingShow"
        >
          <el-table-column
            slot="action"
            prop="alarm_level"
            label="告警级别"
            width="150"
            :filters="[
              { text: '无', value: 0 },
              { text: '通知', value: 1 },
              { text: '一般', value: 2 },
              { text: '严重', value: 3 },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom"
          >
            <template slot-scope="scope">
              <el-tag
                v-if="TagschangeMessage(scope.row.alarm_level)"
                :type="TagsColorMessage(scope.row.alarm_level)"
                disable-transitions
                effect="dark"
                size="mini"
                >{{ TagschangeMessage(scope.row.alarm_level) }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column slot="action" fixed="right" label="操作" width="80">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteAlarm(scope.row)"
                size="mini"
                v-has="'del'"
              ></el-button>
            </template>
          </el-table-column>
        </yg-table>
      </el-tab-pane>
      <el-tab-pane label="历史事件">
        <el-card style="margin-bottom: 5px">
          <el-form
            ref="FtuForm"
            :model="formData"
            label-width="80px"
            size="mini"
          >
            <el-row>
              <el-col :span="5">
                <el-form-item label="查询类型" prop="searchType">
                  <el-select
                    style="width: 100%"
                    v-model="formData.searchType"
                    placeholder="请选择"
                    @change="selectChange"
                  >
                    <el-option label="按返回数量查询" :value="0"></el-option>
                    <el-option label="按起始时间查询" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="5" v-if="formItemNumShow">
                <el-form-item label="返回数量" prop="retCount">
                  <el-input v-model="formData.retCount"></el-input>
                </el-form-item>
              </el-col>
              <!-- </el-row>
          <el-row> -->
              <el-col :span="5" v-if="formItemDateShow">
                <el-form-item label="开始时间" prop="beginTime">
                  <el-date-picker
                    style="width: 100%"
                    v-model="formData.beginTime"
                    type="datetime"
                    placeholder="选择开始日期时间"
                    range-separator=":"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    clearable
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5" v-if="formItemDateShow">
                <el-form-item label="结束时间" prop="endTime">
                  <el-date-picker
                    style="width: 100%"
                    v-model="formData.endTime"
                    type="datetime"
                    placeholder="选择结束日期时间"
                    range-separator=":"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    clearable
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="事件类型" prop="alarm_type">
                  <el-select
                    style="width: 100%"
                    v-model="formData.alarm_type"
                    placeholder="请选择"
                  >
                    <el-option label="全部事件类型" :value="0"></el-option>
                    <el-option label="遥信变位事件" :value="1"></el-option>
                    <el-option label="遥测越限事件" :value="2"></el-option>
                    <el-option label="网关事件" :value="3"></el-option>
                    <el-option label="终端事件" :value="4"></el-option>
                    <el-option label="遥控事件" :value="5"></el-option>
                    <el-option label="遥调事件" :value="6"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-button
                  size="mini"
                  type="primary"
                  @click="query"
                  style="margin-left: 20px"
                  >查询</el-button
                >
                <el-button size="mini" type="danger" @click="resset"
                  >重置</el-button
                >
                <el-button type="primary" size="mini" @click="exportButton"
                  >导出</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <yg-table
          id="myTable"
          :columns="columns"
          :tableList="TableList1"
          :height="'500'"
        >
          <el-table-column
            slot="action"
            prop="alarm_level"
            label="告警级别"
            width="150"
            :filters="[
              { text: '无', value: 0 },
              { text: '通知', value: 1 },
              { text: '一般', value: 2 },
              { text: '严重', value: 3 },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom"
          >
            <template slot-scope="scope">
              <el-tag
                v-if="TagschangeMessage(scope.row.alarm_level)"
                :type="TagsColorMessage(scope.row.alarm_level)"
                disable-transitions
                effect="dark"
                size="mini"
                >{{ TagschangeMessage(scope.row.alarm_level) }}</el-tag
              >
            </template>
          </el-table-column>
        </yg-table>
        <div style="margin-top: 10px" v-show="TableList1.length > 0">
          <b>共 {{ TableList1.length }} 条</b>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { myStorage } from "@/utils/localStorage";
import YgTable from "@/components/Table/YgTable.vue";
import { exportExcel } from "../../utils/exportExcelBlob/index";
import {
  setMessageCallback,
  publishMsg,
  removeMessageCallback,
  checkSpecialId,
} from "@/mqtt";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "AlarmEvent",
  components: {
    YgTable,
  },
  data() {
    //这里存放数据
    return {
      loadingShow: false,
      columns: [
        {
          prop: "update_time",
          label: "告警时间",
          align: "left",
          width: 200,
        },
        {
          prop: "id",
          label: "数据id",
        },
        {
          prop: "name",
          label: "数据名称",
        },
        {
          prop: "desc",
          label: "数据描述",
        },
        {
          prop: "alarm_type",
          label: "告警类型",
          formatter(row) {
            if (row.hasOwnProperty("alarm_type")) {
              let state = row.alarm_type;
              var stateMap = {
                1: "遥信变位",
                2: "遥测越限",
                3: "网关事件",
                4: "终端事件",
                5: "遥控事件",
                6: "遥调事件",
              };
              return stateMap[state];
            } else {
              return "";
            }
          },
        },
        {
          prop: "alarm_desc",
          label: "告警描述",
          width: 270,
        },
        {
          prop: "value",
          label: "告警值",
          width: 80,
        },
        {
          prop: "unit",
          label: "告警单位",
          width: 100,
        },
        { slot: "action", align: "center" },
      ],
      TableList1: [],
      TableList2: [],
      formData: {
        searchType: 0,
        alarm_type: 0,
        retCount: 1,
        beginTime: "",
        endTime: "",
      },
      formItemNumShow: true,
      formItemDateShow: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeMessage(state) {
      var stateMap = {
        0: "全部事件",
        1: "遥信变位",
        2: "遥测越限",
        3: "网关事件",
        4: "终端事件",
        5: "遥控事件",
        6: "遥调事件",
      };
      return stateMap[state];
    },
    TagschangeMessage(state) {
      var stateMap = {
        0: "无",
        1: "通知",
        2: "一般",
        3: "严重",
      };
      return stateMap[state] || "";
    },
    TagsColorMessage(state) {
      var stateMap = {
        0: "info",
        1: "success",
        2: "warning",
        3: "danger",
      };
      return stateMap[state] || "";
    },
    filterTag(value, row) {
      return row.alarm_level === value;
    },
    query() {
      let newMsg = {
        webMsgType: 1019,
        funCode: 1,
      };

      newMsg.data = this.formData;
      publishMsg(newMsg);
    },
    resset() {
      this.$refs.FtuForm.resetFields();
    },
    deleteAlarm(id) {
      this.$confirm(
        `将要删除id为:${id.id}的用户吗？是否确定删除除?`,
        "删除告警",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let newMsg = {
            webMsgType: 1019,
            funCode: 4,
          };
          newMsg.data = { id: id.id };
          publishMsg(newMsg);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消踢除",
          });
        });
    },
    selectChange(val) {
      //console.log(val)
      val == "0"
        ? (this.formItemNumShow = true)
        : (this.formItemNumShow = false);
      val == "1"
        ? (this.formItemDateShow = true)
        : (this.formItemDateShow = false);
    },
    exportButton() {
      if (this.TableList1.length == 0) {
        this.$message.warning("请查询数据后再导出！");
      } else {
        exportExcel(
          document.getElementById("myTable"),
          `${this.changeMessage(this.formData.alarm_type)}.xlsx`
        );
      }
    },
    onMessage(topic, msg) {
      switch (msg.webMsgType) {
        case 1019:
          // console.log(msg);
          switch (msg.funCode) {
            case 0:
              if (msg.retCode != 0 || !msg.data) {
                this.$message.error(msg.retMsg);
              } else {
                this.TableList2 = msg.data;
                this.loadingShow = false;
              }
              break;
            case 1:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0 || !msg.data) {
                  return this.$message.error(msg.retMsg);
                } else {
                  this.TableList1 = msg.data;
                }
              }
              break;
            case 4:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  this.$message.error(msg.retMsg);
                } else {
                  this.$message.success("删除成功!");
                }
              } else {
                console.log("checkSpecialId false");
              }
              break;
            default:
              break;
          }
          break;

        default:
          break;
      }
    },
    // 按钮点击
    buttonClick(index, prop) {
      ////console.log(index, prop);
      if (index == "resetButton") {
        this.$refs.FtuForm.resetForm();
      }
      if (index == "queryButton") {
        let newMsg = {
          webMsgType: 1019,
          funCode: 1,
        };

        newMsg.data = this.formData;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    setMessageCallback(this.onMessage);
    //console.log("终端管理页面请求消息");
    publishMsg({
      webMsgType: 1019,
      funCode: 0,
    });
    this.loadingShow = true;
    //console.log("终端页面请求消息 完成");
  },
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 5px 5px 5px 5px;
}
::v-deep.el-tag--dark.el-tag--danger {
  background-color: red;
  border-color: red;
  color: #fff;
}
::v-deep .el-tag--dark.el-tag--danger {
  background-color: red;
  border-color: red;
  color: #fff;
}
::v-deep .el-tag--dark.el-tag--warning {
  background-color: yellow;
  border-color: yellow;
  color: red;
}
::v-deep .el-tag--dark.el-tag--success {
  background-color: green;
  border-color: green;
  color: #fff;
}
</style>
